
<template>
    <!-- <Login v-if="flag"></Login> -->
    <!-- 分析页面布局 -->
    <!-- body或者和body一样大的div设置背景图片 -->
    <!-- 页面中间有一个div居中显示 -->
    <!-- 分析div 左中右三块布局 -->
     <div class="body">
    <div id="app">
        <!-- 左侧 -->
         <div class="divLeft">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
         </div>
        <div class="divRight">

         </div>
         <!-- 中间 -->
         <div class="divCenter">
            <div class="divFrom">
                <!-- 表单元素 -->
                <from action="#" method="post">
                    <table>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="username">
                                    用户名
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="text" v-model="username" id="username" placeholder="请输入用户名">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="password">
                                    密码
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="password" v-model="password" id="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="email">
                                    E-mail
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="text" v-model="email" id="email" placeholder="请输入Email">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="name">
                                    姓名
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="text" v-model="name" id="name" placeholder="请输入真实的姓名">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="phone">
                                    手机号
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="text" v-model="phone" id="phone" placeholder="请输入您的手机号">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="gender">
                                    性别
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="radio" v-model="gender" id="male" value="男">男
                                <input type="radio" v-model="gender" id="female" value="女">女
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="date">
                                    出生日期
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="date" v-model="date" id="date">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdLeft">
                                <label class="" for="checkCode">
                                    验证码
                                </label>
                            </td>
                            <td class="tdRight">
                                <input type="text" v-model="checkCode" id="checkCode" placeholder="请输入验证码">
                                <img id="imgCode"src="../img/verify_code.jpg" alt="">
                            </td>
                        </tr>
                        <tr>
                            <td @click="login" id="tdSubmit" colspan="2">
                                <input id="btnSubmit" type="submit" value="注册">
                            </td>
                        </tr>
                    </table>
                </from>
            </div>
         </div>
    </div>   
</div> 
</template>
<script setup>
import {ref} from 'vue';
const username = ref();
const password = ref();
const email = ref();
const name = ref();
const phone = ref();
const gender = ref();
const date = ref();
const checkCode = ref();

function login(){
    console.log("username:" + username.value);
  console.log("password:" + password.value);
  console.log("email:" + email.value);
  console.log("name:" + name.value);
  console.log("phone:" + phone.value);
  console.log("gender:" + gender.value);
  console.log("date:" + date.value);
  console.log("checkCode:" + checkCode.value);
//   alert("username:" + username.value+"\n"
//     +"password:" + password.value+"\n"
//     +"email:" + email.value+"\n"
//     +"name:" + name.value+"\n"
//     +"phone:" + phone.value+"\n"
//     +"gender:" + gender.value+"\n"
//     +"date:" + date.value+"\n"
//     +"checkCode:" + checkCode.value+"\n"
// )
}
</script>
<style scoped>
   .body{
        padding-top:40px;
        background-image:url(../img/login_bg.png);
        background-position:center;
        background-repeat: no-repeat;
    }
    #app{
        /* border:1px solid red; */
        width:900px;
        height:600px;
        border:5px solid #eee;
        /* 让div水平居中 */
        margin:auto;
        background-color: white;
    }
    .divLeft.divCenter.divRight{
        /* border:1px solid red; */
    }
    .divLeft{
        float:left;
        width:25%;
        padding-top:20px;
        padding-left: 20px;
    }
    .divLeft>p:first-child{
        color: #ffd026;
        font-size: 20px;
    }
    .divLeft>p:last-child{
        color: #a6a6a6;
        font-size: 20px;
        /* font-weight: bold; */
    }
    .divCenter{
        float:left;
        /* 这里减去的值是左右宽度 */
        width:calc(100% - 25% - 25%);
        padding-top: 80px;
    }
    table{
        color:#a6a6a6;
    }
    .tdLeft{
        width: 150px;
        height: 45px;
        text-align: right;
        padding-right: 45px;
    }
    .divRight{
        float:right;
        width:25%;
        padding-top: 20px;
        padding-right: 20px;
    }
    .divRight>p{
        font-size: 15px;
        color: #a6a6a6;
        text-align: right;
    }
    .divRight p a{
        color: pink;
    }
    /* 单独设置验证码图片 */
    #imgCode{
        height:32px;
        /* 垂直居中 */
        vertical-align: middle;
    }
    /* 表单中放置提交按钮的td */
    #tdSubmit{
        text-align: center;
    }
    #btnSubmit{
        width: 115px;
        height: 30px;
        background-color: #ffd026;
        border: 0px ;
        color: #a6a6a6;
        border-radius: 5px;
    }
    #username,#password,#checkCode,#email,#name,#phone,#date{
        width: 251px;
        height: 32px;
        border: 1px solid #a6a6a6;
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkCode{
        width: 110px;
    }
</style>